<template>
  <div class="case-statistics-container">
    <p class="common-list-bread">我的科目</p>
    <div class="statistics-container-top">
      <div class="container-top-left common-query-box">
        <div>
          <p class="label-title">病种</p>
          <el-form>
            <el-form-item class="width-300">
              <el-select
                v-model="diseases"
                placeholder="请选择"
                clearable
                filterable
                :popper-append-to-body="false"
              >
                <el-option
                  v-for="typeValue in departmentList"
                  :key="typeValue.id"
                  :label="typeValue.name"
                  :value="typeValue.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <div>
          <el-form>
            <p class="label-title">时间</p>
            <el-form-item class="date-time-content">
              <el-date-picker
                value-format="yyyy-MM-dd"
                v-model="startDate"
                type="date"
                :clearable="false"
                :editable="false"
                placeholder="开始时间"
              >
              </el-date-picker>
              —
              <el-date-picker
                value-format="yyyy-MM-dd"
                v-model="endDate"
                type="date"
                :clearable="false"
                :editable="false"
                placeholder="结束时间"
              >
              </el-date-picker>
            </el-form-item>
          </el-form>
        </div>
        <div class="search-btn">
          <el-button class="common-btn-primary left" @click="asyncGetData"
            >搜索</el-button
          >
          <el-button class="common-btn-solid" @click="onClickRest"
            >重置</el-button
          >
        </div>
      </div>
      <div class="container-top-right">
        <div
          class="canvas"
          id="echarts"
          style="height:200px;width:350px;"
        ></div>
        <div class="case-info-content">
          <h3>诊断病例数：516</h3>
          <p class="info-item">
            <span class="item-desc">病数量：100</span>
            <span class="item-desc">病比例：100%</span>
          </p>
          <p class="info-item">
            <span class="item-desc">病数量：100</span>
            <span class="item-desc">病比例：100%</span>
          </p>
          <p class="info-item">
            <span class="item-desc">病数量：100</span>
            <span class="item-desc">病比例：100%</span>
          </p>
        </div>
      </div>
    </div>
    <div class="common-table-box"></div>
    <p class="common-list-bread">统计</p>
    <div id="echarts2" class="echarts2"></div>
  </div>
</template>

<script>
// 引入 ECharts 主模块
import echarts from "echarts/lib/echarts";

// 引入饼状图
import "echarts/lib/chart/pie";
import "echarts/lib/chart/line";
// 引入提示框和标题组件
import "echarts/lib/component/tooltip";
import "echarts/lib/component/title";
import macarons from "echarts/theme/macarons";
import { debounce } from "utils/tools";

export default {
  data() {
    return {
      userId: "",

      departmentList: [
        {
          name: "hh",
          id: 1,
        },
      ],
      diseases: "", //病种
      startDate: "",
      endDate: "",
      /* canvas */
      myChart: null,
      myChart2: null,

      /* pipe */
      list: [
        {
          taskPancakeStatisticsVoList: [
            { value: 335, name: "直接访问" },
            { value: 310, name: "邮件营销" },
            { value: 234, name: "联盟广告" },
            { value: 135, name: "视频广告" },
            { value: 1548, name: "搜索引擎" },
          ],
        },
      ],
      option: {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : 天数{c} ({d}%)",
          // confine: true, //将此限制打开后tooltip将不再溢出
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            // radius: ["50%", "70%"],
            center: ["50%", "60%"],
            label: {
              formatter: "{c}\n{b}",
              /* normal: {
                      position: "inside"//此处将展示的文字在内部展示
              } */
            },
            data: [],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      },
      option2: {
        /* title: {
          text: "未来一周气温变化",
          subtext: "纯属虚构",
        }, */
        tooltip: {
          trigger: "axis",
          formatter: '{a}<br /> 总数:{c}'
        },
        /* legend: {
          // data: ['最高气温', '最低气温']
        }, */
        /* toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: "none",
            },
            dataView: { readOnly: false },
            magicType: { type: ["line", "bar"] },
            restore: {},
            saveAsImage: {},
          },
        }, */
        xAxis: {
          type: "category",
          name: '数量',
          boundaryGap: false,
          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
        },
        yAxis: {
          /* type: "value",
          axisLabel: {
            formatter: "{value} °C",
          }, */
          type: 'log',
          name: '数量',
        },
        series: [
          {
            name: "最高气温",
            type: "line",
            data: [11, 50, 15, 23, 12, 63, 40],
            /* markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" },
              ],
            }, */
            /* markLine: {
              data: [{ type: "average", name: "平均值" }],
            }, */
          },
         /*  {
            name: "最低气温",
            type: "line",
            data: [1, 2, 2, 5, 3, 2, 0],
            markPoint: {
              data: [{ name: "周最低", value: -2, xAxis: 1, yAxis: -1.5 }],
            },
            markLine: {
              data: [
                { type: "average", name: "平均值" },
                [
                  {
                    symbol: "none",
                    x: "90%",
                    yAxis: "max",
                  },
                  {
                    symbol: "circle",
                    label: {
                      position: "start",
                      formatter: "最大值",
                    },
                    type: "max",
                    name: "最高点",
                  },
                ],
              ],
            },
          }, */
        ],
      },
    };
  },
  created() {
    this.userId = localStorage.getItem("userId");
    // this.getQueryParams();
    /*   this.asyncGetTableData(1);
      this.asyncGetTableData(2); */
  },
  mounted() {
    this.createEcharts();
    window.addEventListener("resize", debounce(this.onResize, 500));

    // this.myChart.resize();
  },

  methods: {
    //获取数据
    asyncGetData() {
      //url是动态的 {'1':'','2':''}
      this.$axios
        .get("xxxxxx", {
          params: {
            startDate: this.startDate,
            endDate: this.endDate,
            diseases: this.diseases,
          },
        })
        .then((res) => {
          if (res.data.code === 200) {
          } else {
            this.$message.error(res.data.msg);
          }
        });
    },
    //重置
    onClickRest() {
      this.startDate = "";
      this.endDate = "";
      this.diseases = "";
      this.myChart = null;
      this.myChart2 = null;
      this.asyncGetData();
    },
    //图表生成
    createEcharts() {
      this.myChart = echarts.init(
        document.getElementById("echarts"),
        "macarons"
      );
      let options = this.option;
      options.series[0].data = this.list[0].taskPancakeStatisticsVoList;
      this.myChart.setOption(options);

      this.myChart2 = echarts.init(
        document.getElementById("echarts2"),
        "macarons"
      );
      let options2 = this.option2;
      // options2.series[0].data = this.list[0].taskPancakeStatisticsVoList;
      this.myChart2.setOption(options2);
    },
    onResize() {
      console.log(1);
      this.myChart2 ? this.myChart2.resize() : null;
    },
  },
};
</script>
<style scoped lang="scss" type="text/scss">
.statistics-container-top {
  display: flex;
  margin-bottom: 20px;
  .container-top-left {
    flex: 0 0 355px;
    width: 355px;
    margin-right: 20px;
    .label-title {
      margin-bottom: 5px;
    }
  }
  .container-top-right {
    display: flex;
    flex: 1;
    padding-bottom: 20px;

    .case-info-content {
      flex: 0 0 240px;
      width: 240px;
      margin: 60px;
      h3 {
        margin-bottom: 20px;
      }
      .info-item {
        display: flex;
        justify-content: space-between;
        line-height: 30px;
      }
    }
  }
}
.echarts2 {
  min-width: 500px;
  /*  width: 400px;
  height: 400px; */
  min-height: 400px;
}
.statistics-container-top .width-300 /deep/ .el-select {
  width: 300px;
}
.statistics-container-top .el-select /deep/ .el-select-dropdown {
  position: absolute;
  left: 0 !important;
}

.date-time-content /deep/ .el-date-editor.el-input,
.date-time-content /deep/ .el-date-editor.el-input__inner {
  width: 140px;
}
#echarts {
  position: relative;
  top: -10px;
}
</style>
<style>
.case-statistics-container .no-task {
  margin-top: 10px;
}
</style>
